<template>
	<view class="page">
		<view class="return" @click="toReturn()" style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<u-tabs :list="routeList" @click="click" :activeStyle="activeStyle" lineColor="#2979ff"></u-tabs>
		<navigator hover-class="none" :url="'/pages/integral/couponDetail?id='+item.id" class="list flex align"
			v-for="(item,index) in list" :key="index">
			<view class="list-info">
				<view class="name">{{item.name}}</view>
				<view style="color: rgb(243, 135, 58);font-size: 24rpx;">{{item.type_text}}</view>
				<view class="flex">领取时间：{{item.receive_time}}</view>
				<view class="flex">有效期：{{item.start_time}}-{{item.end_time}}</view>
				<view class="flex">可用店铺：{{item.merchant.name}}</view>
			</view>
			<view class="list-btn" v-if="item.status==1" style="background: rgb(247, 99, 54);color: white;">去使用
			</view>
			<image class="icon" v-if="item.status==2" src="/static/icon14.png"></image>
			<image class="icon" v-if="item.status==3" src="/static/icon15.png"></image>
		</navigator>
		<uni-load-more :status="status" v-if="!empty" :content-text="loadText"></uni-load-more>
		<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
		<!-- 弹窗 -->
		<!-- <view class="showCon" v-if="showCon">
			<view class="showContent">
				<view class="close" @click="toCancel()">
					<u-icon name="close-circle-fill" color="#666666" size="30"></u-icon>
				</view>
				<view style="font-size: 32rpx;margin-bottom: 10rpx;font-weight: bold;">{{itemInfo.prize_name}}</view>
				<tki-qrcode cid="qrcode1" ref="qrcode" :val="val" :size="size" />
				<view>{{itemInfo.redeem_code}}</view>
				<view style="font-size: 32rpx;">{{itemInfo.status==1?'扫码核销':itemInfo.status==2?'已核销':itemInfo.status==3?'已过期':''}}</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		tourMyList
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				val: '', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				showCon: false,
				activeStyle: {
					color: '#2979ff'
				},
				routeList: [{
					val: '',
					name: '全部',
				}, {
					val: 1,
					name: '待使用',
				}, {
					val: 2,
					name: '已使用',
				}, {
					val: 3,
					name: '已过期',
				}],
				totalPage: 1,
				page: 0,
				offset: 10,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				channel_id: 3,
				ws: null,
				path: '/pages/news/news',
				showConInput: false,
				contact_name: '',
				contact_phone: '',
				statusRe: 1,
				record_id: '',
				itemInfo: '',
				listStatus: '',
				contact_idcard: ''
			}
		},
		onLoad(option) {
			this.getlist()
		},
		onShow() {},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			const that = this;
			that.getlist();
		},
		methods: {
			click(e) {
				this.listStatus = e.val
				this.page = 0
				this.list = []
				this.getlist()
			},
			toReturn() {
				uni.navigateBack()
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					listStatus
				} = that;
				let obj = {
					size: offset,
					page: page + 1,
					status: listStatus
				};
				that.status = 'loading';
				if (totalPage > page) {
					let result = await tourMyList(obj);
					if (result.code == 1) {
						that.page = page + 1;
						if (result.data.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.data.list);
						that.totalPage = Math.ceil(result.data.total / offset);
					}
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},

		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 80rpx 32rpx;
	}

	page {
		background: #F3F3F3;
		padding-bottom: 100rpx;
	}

	/* pages/coupon/index.wxss */
	.list {
		margin: 30rpx 0;
		padding: 24rpx;
		box-shadow: 1rpx 1rpx 2rpx 1rpx gainsboro;
		background: white;
		position: relative;
	}

	.price {
		background: #2EAE61;
		border-radius: 8rpx;
		width: 192rpx;
		text-align: center;
		padding: 18rpx 0;
		color: white;

	}

	.price text {
		font-size: 16rpx;
	}

	.price view:nth-child(1) {
		font-size: 48rpx;
	}

	.price view:nth-child(2) {
		font-size: 24rpx;
	}

	.list-info {
		line-height: 2;
		font-size: 24rpx;
		color: #828282;
		margin-left: 20rpx;
	}

	.list-info .name {
		font-size: 30rpx;
		color: #b62d2d;
		font-weight: bold;
	}

	.list-btn {
		font-size: 28rpx;
		border: solid 1rpx;
		color: #007830;
		border-radius: 22rpx;
		padding: 8rpx 25rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}

	.icon {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
</style>